<template>
	<view v-if="show">
		<TnOverlay v-model:show="showOverlay" :duration="250" :opacity="0.4" :z-index="999" />
		<view class="popup">
			<view class="title">设备未激活</view>
			<view class="tips"> 英语学习需要长期坚持哦超多权益等你来解锁 </view>
			<view class="btn-bar">
				<view class="cancel" @click="oncancel"> 放弃福利 </view>
				<view class="confirm" @click="onConfirm"> 立即激活 </view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, defineProps, watch, defineEmits } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useUserStore } from '@/stores'
	const userStore = useUserStore()
	const showOverlay = ref<boolean>(true)
	const show = ref(false)
	const emit = defineEmits(['closePopup'])
	const props = defineProps({
		show: {
			type: Boolean,
			defalut: false,
		},
	})
	watch(
		() => props.show,
		(newProps) => {
			// getData()
		}
	)
	onLoad(() => { })
	const oncancel = () => {
		emit('closePopup')
	}
</script>

<style lang="scss" scoped>
	.popup {
		padding: 48rpx;
		z-index: 9999;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -278rpx;
		margin-top: -168rpx;
		width: 556rpx;
		height: 336rpx;
		background: linear-gradient(164deg, #dee2ff 2%, #ffffff 100%);
		border-radius: 48rpx 48rpx 48rpx 48rpx;

		.title {
			width: 100%;
			height: 48rpx;
			font-family:
				PingFang SC,
				PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.tips {
			width: 100%;
			height: 40rpx;
			font-family:
				PingFang SC,
				PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 24rpx;
			margin-bottom: 48rpx;
		}

		.btn-bar {
			display: flex;
			justify-content: space-between;

			.cancel {
				width: 224rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: #f2f4f8;
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #6d7b9b;
				text-align: center;
				font-style: normal;
				text-transform: none;
				border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
			}

			.confirm {
				line-height: 80rpx;
				font-family:
					PingFang SC,
					PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #ffffff;
				text-align: center;
				font-style: normal;
				text-transform: none;
				width: 224rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
				border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;
			}
		}
	}
</style>